<template>
  <a-modal
    v-model:visible="props.otherShowble"
    width="55vw"
    :title="`新增子题`"
    @cancel="emit('update:otherShowble', false)"
    :bodyStyle="{
      backgound: 'rgba(255,255,255,1)',
      padding: '20px',
    }"
  >
    <a-form :model="Data.formObjct" ref="setForm" class="cancel-form" :rules="Data.rules">
      <a-form-item label="新增子题是否为模块" name="sfwmk">
        <a-switch
          v-model:checked="Data.formObjct.sfwmk"
          checkedChildren="是"
          unCheckedChildren="否"
          :checkedValue="1"
          :unCheckedValue="0"
          :disabled="Data.nsetBoolen || isBatchHasObj.sfwmk === 0"
        />
      </a-form-item>
      <a-form-item label="模块名称" name="mkmc" v-if="Data.formObjct.sfwmk === 1">
        <a-input placeholder="请填写模块名称" v-model:value="Data.formObjct.mkmc"></a-input>
      </a-form-item>
      <a-form-item label="新增子题题目类型" name="tmlx" v-if="Data.formObjct.sfwmk === 0">
        <a-select
          v-model:value="Data.formObjct.tmlx"
          :default-active-first-option="false"
          :show-arrow="false"
          :options="Data.teacherOptions"
          :filter-option="false"
          :disabled="isBatchHasObj.sfwmk === 0 || Data.nsetBoolen"
          :not-found-content="null"
          @change="switchChange"
          placeholder="请选择题目类型"
        />
      </a-form-item>

      <a-form-item
        label="新增子题是否最小得分单位"
        name="sfzxdtdw"
        v-if="Data.formObjct.sfwmk === 0"
      >
        <a-switch
          :disabled="
            (!!isBatchHasObj?.subArr &&
              !!isBatchHasObj?.subArr.length &&
              (isBatchHasObj.tmlx === '填空题' ||
                machineReadableProblem.includes(isBatchHasObj.tmlx)) &&
              isBatchHasObj.sfwmk === 0) ||
            (isBatchHasObj.sfwmk === 1 &&
              (machineReadableProblem.includes(Data.formObjct.tmlx) ||
                Data.formObjct.tmlx === '填空题')) ||
            Data.nsetBoolen
          "
          v-model:checked="Data.formObjct.sfzxdtdw"
          checkedChildren="是"
          unCheckedChildren="否"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item label="新增子题/模块数量" name="ztgs">
        <a-input-number
          v-model:value="Data.formObjct.ztgs"
          :disabled="Data.nsetBoolen"
          :step="1"
          :min="1"
          style="width: 100%"
          placeholder="请填写子题数量"
        />
      </a-form-item>
      <a-form-item
        label="新增子题选项数量"
        name="xxsl"
        v-if="
          machineReadableProblem.includes(Data.formObjct.tmlx) &&
          Data.formObjct.tmlx !== '判断题' &&
          Data.formObjct.sfwmk === 0
        "
      >
        <a-input-number
          :disabled="Data.nsetBoolen"
          v-model:value="Data.formObjct.xxsl"
          :step="1"
          :min="1"
          :max="25"
          style="width: 50%"
          placeholder="请填写子题选项数量"
        />
        <span class="ml-5">
          示例：{{
            isJdWrongType
              ?.slice(0, Data.formObjct.xxsl || 4)
              .map(item => item.label)
              .join(',')
          }}
        </span>
      </a-form-item>
      <Divider>子题分值</Divider>
      <div class="h-[30vh] overflow-y-auto">
        <a-row :gutter="[50, 0]" class="w-full">
          <a-col :span="8" v-for="(item, index) in Data.formObjct.childrenList" :key="index">
            <a-form-item
              :label="item.tmbh"
              :name="['childrenList', index, 'tmfz']"
              :rules="{ required: true, message: '请填写新增子题选项数量' }"
            >
              <a-input-number
                v-model:value="item.tmfz"
                :step="1"
                :min="1"
                style="width: 100%"
                placeholder="请填写子题题目分值"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
    </a-form>
    <template #footer>
      <a-button @click="editCancel">{{ Data.nsetBoolen ? `上一步` : `取消` }}</a-button>
      <a-button @click="editOk" type="primary">{{ Data.nsetBoolen ? `保存` : `下一步` }}</a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { machineReadableProblem, isJdWrongType, teacherOptions } from '../index'
import { Divider } from 'ant-design-vue'
import { setSaveTxjgDraft } from '/@/api/examinationAudit'

import { useMessage } from '/@/hooks/web/useMessage'

const { createMessage } = useMessage()

import { useRoute } from 'vue-router'
const route = useRoute()

const props = defineProps({
  isBatchHasObj: { type: Object, default: {} },
  otherShowble: { type: Boolean, default: false },
})
const Data = reactive({
  teacherOptions,
  nsetBoolen: false,
  formObjct: {
    sfzxdtdw: 0,
    ztgs: 1,
    xxsl: 4,
    childrenList: [],
  },
  rules: {
    sfzxdtdw: [{ required: true, message: '请选择新增子题是否最小得分单位' }],
    ztgs: [{ required: true, message: '请填写新增子题数量' }],
    xxsl: [{ required: true, message: '请填写新增子题选项数量' }],
    mkmc: [{ required: true, message: '请填写模块名称' }],
    tmlx: [{ required: true, message: '请选择新增子题题型' }],
  },
} as any)

const emit = defineEmits(['update:otherShowble', 'update:isBatchHasObj', 'success'])

function editCancel() {
  if (Data.nsetBoolen) {
    Data.nsetBoolen = false
    Data.formObjct.childrenList = []
  } else {
    emit('update:otherShowble', false)
    emit('update:isBatchHasObj', {})
  }
}

watch(
  () => props.otherShowble,
  val => {
    Data.nsetBoolen = false
    Data.formObjct = {
      sfzxdtdw: 1,
      ztgs: 1,
      xxsl: 2,
      tmlx: props.isBatchHasObj.tmlx || undefined,
      childrenList: [],
      sfwmk: props.isBatchHasObj.sfwmk === 0 ? 0 : 0,
      mkmc: '',
    }
    if (val) {
      Data.formObjct.xxsl = props.isBatchHasObj?.xxsl || 4
      if (props.isBatchHasObj?.subArr && props.isBatchHasObj?.subArr.length) {
        Data.formObjct.sfzxdtdw = props.isBatchHasObj?.subArr[0].sfzxdtdw
      }
    }
  }
)

const setForm = ref()

function editOk() {
  setForm.value
    .validate()
    .then(async () => {
      if (Data.nsetBoolen) {
        let { code, message } = await setSaveTxjgDraft({
          kmdm: route.query.kmdm,
          sjlb: route.query?.sjlb,
          saveDraftList: Data.formObjct.childrenList,
        })
        if (code === 200) {
          createMessage.success('保存成功')
          emit('update:otherShowble', false)
          emit('update:isBatchHasObj', {})
          emit('success')
        } else {
          createMessage.warn(message)
        }
      } else {
        let obj: any = {
          editStatus: 3,
          children: [],
          tmlx: Data.formObjct.sfwmk == 1 ? '' : Data.formObjct.tmlx,
          tmbt: '',
          tmfz: null,
          xxsl:
            Data.formObjct.sfwmk === 0
              ? machineReadableProblem.includes(props.isBatchHasObj.tmlx) ||
                props.isBatchHasObj.tmlx !== '判断题'
                ? Data.formObjct.xxsl
                : props.isBatchHasObj.tmlx === '判断题'
                ? 2
                : 0
              : 0,
          sjtmid: props.isBatchHasObj.id,
          sfzxdtdw: Data.formObjct.sfzxdtdw,
          tmxh: null,
          sfwmk: Data.formObjct.sfwmk,
          mkmc: Data.formObjct.mkmc,
          tmbh: '',
          pySzInfoVO: {},
        }
        obj.tmxh = 0
        if (props.isBatchHasObj.children && props.isBatchHasObj.children.length) {
          obj.tmxh = props.isBatchHasObj.children[props.isBatchHasObj.children.length - 1].tmxh
        }
        let num = props.isBatchHasObj.tmfz - props.isBatchHasObj.subAll
        if (num <= Data.formObjct.ztgs) {
          obj.tmfz = 1
        } else {
          obj.tmfz = Math.floor(num / Data.formObjct.ztgs)
        }
        for (let i = 0; i < Data.formObjct.ztgs; i++) {
          obj.tmxh++
          obj.tmbh = `${props.isBatchHasObj.tmbh}${
            props.isBatchHasObj.tmbh.match(/\d/) ? '-' : ''
          }${obj.tmxh}`
          Data.formObjct.childrenList?.push({ ...obj })
        }
        Data.nsetBoolen = true
      }
    })
    .catch(err => console.error(err))
}

function switchChange(e) {
  if (props.isBatchHasObj.sfwmk === 1 && (machineReadableProblem.includes(e) || e === '填空题')) {
    Data.formObjct.sfzxdtdw = 0
  }
}
</script>
